<template>
    <!-- tab -->
    <div class="tab-bar-box">
        <van-tabs class="container-tabs" animated v-model:active="active" :ellipsis="false" :scrollspy="true" :shrink="shrink" :before-change="beforeChange">
            <van-tab v-for="(items, indexs) in data" :replace="replace" :to="items.to" :key="indexs" :title="items.name" :badge="items.badge == 0 ? null : items.badge"></van-tab>
        </van-tabs>
    </div>
</template>
<script setup>
import { watch,onMounted,onActivated } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
    defaultActive: {
      type: Number,
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    shrink:{
      type: Boolean,
      default: true
    },
    replace: {
      type: Boolean,
      default: false
    }
})
const active = ref(props.defaultActive)

watch(
  () => props.defaultActive,
  (newval, oldval) => {
    active.value = newval
    
  }
)

const beforeChange = (index) => {
  // console.info(props.data[index].to.path)
}

</script>